{% extends "base.html" %}
{% load i18n %}

<title>{% block title %}h3-home{% endblock title %}</title>

{% block content %}
<div class="row clearfix">
	<div class="col-md-3 column">
        <h3>
			Event navi
		</h3>
        <ul class="list-group">
          <li class="list-group-item">
            <span class="badge"><a href="#">100</a></span>
            <a href="#">Today events.</a>
          </li>
          <li class="list-group-item">
              <span class="badge"><a href="#">10</a></span>
              <a href="#">This week events.</a>
          </li>
          <li class="list-group-item">
              <span class="badge"><a href="#">1</a></span>
              <a href="#">This month events.</a>
          </li>
        </ul>
        
        <h4>
			Why you need to signin?
		</h4>
		<p>
			Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.
		</p>
		<p>
			<a class="btn" href="#">View details »</a>
		</p>
	</div>
	<div class="col-md-9 column">
		<div class="page-header">
			<h1>
				Event list <small>Activity need to do.</small>
			</h1>
		</div>
		<div class="media">
			 <a href="#" class="pull-left"><img src="http://lorempixel.com/64/64/" class="media-object" alt='' /></a>
			<div class="media-body">
				<h4 class="media-heading">
					<a href="#">Meeting with Mr. Bond / Mr. Bond T</a> <small> - 3 days ago.</small>
				</h4> 
				<p>
				    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
				    <span class="label label-default">meeting</span> <span class="label label-default">bond</span>
				</p>
                
				<ul class="breadcrumb">
    				<li>Type</li>
    				<li>State</li>
    				<li>Status</li>
                </ul>
			</div>
		</div>
		<div class="media">
			 <a href="#" class="pull-left"><img src="http://lorempixel.com/64/64/" class="media-object" alt='' /></a>
			<div class="media-body">
				<h4 class="media-heading">
					<a href="#">Scheduled travelling / Infaster Labs.</a> <small> - 3 days ago.</small>
				</h4> 
				<p>
				    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
				    <span class="label label-default">meeting</span> <span class="label label-default">bond</span>
				</p>
			    <ul class="breadcrumb">
    				<li>Type</li>
    				<li>State</li>
    				<li>Status</li>
                </ul>
			</div>
		</div>
		<div class="media">
			 <a href="#" class="pull-left"><img src="http://lorempixel.com/64/64/" class="media-object" alt='' /></a>
			<div class="media-body">
				<h4 class="media-heading">
					<a href="#">Meeting with Mr. Bond / Mr. Bond T</a> <small> - 3 days ago.</small>
				</h4>
				<p>
				    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
				    <span class="label label-default">meeting</span> <span class="label label-default">bond</span>
				</p>
				<ul class="breadcrumb">
    				<li>Type</li>
    				<li>State</li>
    				<li>Status</li>
                </ul>
			</div>
		</div>
		<div class="media">
			 <a href="#" class="pull-left"><img src="http://lorempixel.com/64/64/" class="media-object" alt='' /></a>
			<div class="media-body">
				<h4 class="media-heading">
					<a href="#">Scheduled travelling / Infaster Labs.</a> <small> - 3 days ago.</small>
				</h4>
				<p>
				    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
				    <span class="label label-default">meeting</span> <span class="label label-default">bond</span>
				</p>
				<ul class="breadcrumb">
    				<li>Type</li>
    				<li>State</li>
    				<li>Status</li>
                </ul>
			</div>
		</div>
		<div class="media">
			 <a href="#" class="pull-left"><img src="http://lorempixel.com/64/64/" class="media-object" alt='' /></a>
			<div class="media-body">
				<h4 class="media-heading">
					<a href="#">Scheduled travelling / Infaster Labs.</a> <small> - 3 days ago.</small>
				</h4>
				<p>
				    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
				    <span class="label label-default">meeting</span> <span class="label label-default">bond</span>
				</p>
				<ul class="breadcrumb">
    				<li>Type</li>
    				<li>State</li>
    				<li>Status</li>
                </ul>
			</div>
		</div>
		<div class="media">
			 <a href="#" class="pull-left"><img src="http://lorempixel.com/64/64/" class="media-object" alt='' /></a>
			<div class="media-body">
				<h4 class="media-heading">
					<a href="#">Scheduled travelling / Infaster Labs.</a> <small> - 3 days ago.</small>
				</h4>
				<p>
				    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
				    <span class="label label-default">meeting</span> <span class="label label-default">bond</span>
				</p>
				<ul class="breadcrumb">
    				<li>Type</li>
    				<li>State</li>
    				<li>Status</li>
                </ul>
			</div>
		</div>
		<div class="media">
			 <a href="#" class="pull-left"><img src="http://lorempixel.com/64/64/" class="media-object" alt='' /></a>
			<div class="media-body">
				<h4 class="media-heading">
					<a href="#">Scheduled travelling / Infaster Labs.</a> <small> - 3 days ago.</small>
				</h4>
				<p>
				    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
				    <span class="label label-default">meeting</span> <span class="label label-default">bond</span>
				</p>
				<ul class="breadcrumb">
    				<li>Type</li>
    				<li>State</li>
    				<li>Status</li>
                </ul>
			</div>
		</div>
		<div class="media">
			 <a href="#" class="pull-left"><img src="http://lorempixel.com/64/64/" class="media-object" alt='' /></a>
			<div class="media-body">
				<h4 class="media-heading">
					<a href="#">Scheduled travelling / Infaster Labs.</a> <small> - 3 days ago.</small>
				</h4>
				<p>
				    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
				    <span class="label label-default">meeting</span> <span class="label label-default">bond</span>
				</p>
				<ul class="breadcrumb">
    				<li>Type</li>
    				<li>State</li>
    				<li>Status</li>
                </ul>
			</div>
		</div>
		<div class="media">
			 <a href="#" class="pull-left"><img src="http://lorempixel.com/64/64/" class="media-object" alt='' /></a>
			<div class="media-body">
				<h4 class="media-heading">
					<a href="#">Scheduled travelling / Infaster Labs.</a> <small> - 3 days ago.</small>
				</h4>
				<p>
				    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
				    <span class="label label-default">meeting</span> <span class="label label-default">bond</span>
				</p>
				<ul class="breadcrumb">
    				<li>Type</li>
    				<li>State</li>
    				<li>Status</li>
                </ul>
			</div>
		</div>
	</div>

</div>
{% endblock content %}